<template>
  <XmMap ref="xmMap"></XmMap>
</template>

<script>
import { getWarehouseList, getWarehouseByType } from "@/api/warehouse";
import { getWarehouseLabel } from '@/util/map'

export default {
  data() {
    return {
      orderData: {}
    };
  },
  methods: {
    // 初始加载地图
    initMapData(orderData) {
      this.orderData = orderData || {}
      if (this.$refs.xmMap && this.orderData.id) {
        this.$refs.xmMap.clearMap()
        this.$refs.xmMap.setCenter([this.orderData.longitude, this.orderData.latitude])
        this.addOrderLocationOnMap()
        this.addWarehouseOnMap()
        this.addPlatformWarehouseOnMap()
      }
    },
    setCenter(center) {
      this.$refs.xmMap.setCenter(center)
    },
    // 添加订单位置marker
    addOrderLocationOnMap() {
      const marker = this.$refs.xmMap.createMarker({
        longitude: this.orderData.longitude,
        latitude: this.orderData.latitude,
        label: {
          content: `<div class='info'>${this.orderData && this.orderData.receiverAddress}</div>`
        },
        icon: {
          image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png'
        },
        zIndex: 50
      })
      this.$refs.xmMap.map.add([marker])
    },
    // 添加仓库区域
    addWarehouseOnMap() {
      getWarehouseList({ cityId: this.orderData.deptId }).then(res => {
        const resData = res.data.data || [];
        if (resData && resData.length) {
          const markers = resData.map(item => {
            return this.$refs.xmMap.createMarker({
              longitude: item.longitude,
              latitude: item.latitude,
              label: {
                content: getWarehouseLabel(item)
              },
            })
          });

          const polygonPath = resData.map(item => {
            return item.geoJson.geometry.coordinates[0]
          })
          const polygon = this.$refs.xmMap.createPolygon({
            path: polygonPath,
            strokeColor: "#000",
            strokeWeight: 3,
            strokeOpacity: 1,
            fillOpacity: 0.4,
            fillColor: "#fff",
            zIndex: 40,
          });
          this.$refs.xmMap.map.add([...markers, polygon])
        }
      })
    },
    // 添加平台仓区域
    addPlatformWarehouseOnMap() {
      getWarehouseByType({
        cityId: this.orderData.deptId,
        type: 99,// 平台仓
      }).then(res => {
        const resData = res.data.data || []
        if (resData && resData.length) {
          const markers = resData.map(item => {
            return this.$refs.xmMap.createMarker({
              longitude: item.longitude,
              latitude: item.latitude,
              label: {
                content: getWarehouseLabel(item)
              },
            })
          });

          const polygonPath = resData.map(item => {
            return item.geoJson.geometry.coordinates[0]
          })
          const polygon = this.$refs.xmMap.createPolygon({
            path: polygonPath,
            strokeColor: "#FF33FF",
            strokeWeight: 2,
            strokeOpacity: 1,
            fillOpacity: 0.4,
            fillColor: "#1791fc",
            zIndex: 50,
          });
          this.$refs.xmMap.map.add([...markers, polygon])
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>

</style>